<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750" bg-color="#efeff4" ></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"  style="height: 1500rpx;">
			<swiper-item class="swiper-item" v-for="(item,index) in tabs">
				<scroll-view scroll-y style="height: 1500rpx;width: 100%;" @scrolltolower="onreachBottom">
					 <view id="demo1" class="order-box" v-for="(item, index) in tabs[current]" :key="index">
						<view class="ordertime">下单时间 {{item.orTime}}</view>
						<view @click="goOrderDetail(item.orId,item.unionid,item.orStatus,item.orPeisongtype,item.orTime,item.code,item.zitiId,item.adId)">
							<view class="goods-info" v-for="(items,index) in item.orderDetailList">
								<view>
									<image :src="swichImage(items.ppGoods.gimages)" style="width: 180rpx;max-height: 130rpx;" class="goods-img" mode="widthFix"></image>
								</view>
								<view class="goods-name">
									<view style="font-size: 13px;">
										<view>{{items.ppGoods.gname}}</view>
										<view class="qian">{{items.odCost/items.odNum}}</view>
									</view>
									<view style="font-size: 12px;">
										<view class="jianjie" >{{items.ppGoods.jianjie}}</view>
										<view style="padding-top: 30rpx;">×{{items.odNum}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="summary-box">
							共{{item.orTotalnum}}件商品 合计: <text class="qian">{{item.orPrice}}</text> (含运费<text class="qian">{{item.orYunfei}}</text>)
						</view>
						<view class="status-box">
							<view v-if="item.orStatus==0" class="status-btn1" @click="deleteOrder(item.orId,index)">删除订单</view>
							<view v-if="item.orStatus==0" class="status-btn" @click="goPay(item.unionid,item.orPrice,item.orYunfei,item.orderDetailList[0].ppGoods.gimages)">待付款(去支付)</view>
							<view v-if="item.orStatus==1 && item.orPeisongtype==1" class="status-btn1" @click="tuikuan(item.orId,item.address.adPhone,item.orderDetailList[0].gid,item.orderDetailList[0].odId)">申请退款</view>
							<view v-if="item.orStatus==1 && item.orPeisongtype==0" class="status-btn1" @click="shouhuo(item.orId,index)">确认收货</view>
							<view v-if="item.orStatus==2 && item.orPeisongtype==1" class="status-btn2" @click="WuLiu(item.orId)">查看物流</view>
							<view v-if="item.orStatus==2 && item.orPeisongtype==1" class="status-btn" @click="shouhuo(item.orId,index)">确认收货</view>
							<view v-if="item.orStatus<3 && item.orStatus>0 && item.orPeisongtype==0" class="status-btn2" @click="ziti(item.code)">自提</view>
							<view v-if="item.orStatus<3 && item.orStatus>0 && item.orPeisongtype==0" class="status-btn2" @click="changeZitidian(item.orId,item.orderDetailList[0].gid)">更换自提点</view>
							<view v-if="item.orStatus==2 && item.orPeisongtype==0" class="status-btn1" @click="quxiaoOrder(item.orId,index)">取消订单</view>
							<view v-if="item.orStatus==2 && item.orPeisongtype==0" class="status-btn" @click="shouhuo(item.orId,index)">确认收货</view>
							<view v-if="item.orStatus!=2 && item.orStatus!=0" class="status-btn">{{item.orStatus | showStatus}}</view>
						</view>
					 </view>
					<u-loadmore :status="status" @loadmore="onreachBottom" />
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',	// 上拉加载
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				page:1,
				n:10,	// 订单状态 
				// 分段器
				list: [{name:"全部"},{name: '待付款'}, {name: '待发货'}, {name: '待收货'},{name:"已收货"},{name:"自提"}],
				// 订单数据
				tabs:[[],[],[],[],[],[]],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		onLoad(opt) {
			// 根据参数显示指定的tab项
			this.current = opt.index;
			this.swiperCurrent = opt.index;
			switch (opt.index){
				case '0': this.n='10';break;// 全部
				case '1': this.n='0';break;	// 未付款
				case '2': this.n='1';break;	// 未发货
				case '3': this.n='2';break;	// 未收货
				case '4': this.n='3';break;	// 已收货
				case '5': this.n='4';break;	// 自提
			}
			// 加载不同状态的订单
			this.getOrders(10,0);
			this.getOrders(0,1);
			this.getOrders(1,2);
			this.getOrders(2,3);
			this.getOrders(3,4);
			this.getOrders(4,5);
			console.log("好家伙")
			console.log(this.tabs)
		},
		computed:{
			
		},
		filters:{
			showStatus(s){
				if(s=='0')
					return "待付款";
				else if(s=='1')
					return "待发货";
				else if(s=='2')
					return "待收货";
				else if(s=='3')
					return "已收货";
				else if(s=='4')
					return "退货换货申请中";
				else if(s=='5')
					return "退货换货完成";
				else if(s=='6')
					return "退款完成";
				else if(s=='7')
					return "取消订单成功";
			}
		},
		methods: {
			//更换自提点
			changeZitidian(orId,gid){
				uni.redirectTo({
					url:'zitidian?gid='+gid+'&orId='+orId+'&getBack=3'
				})
			},
			//确认收货
			shouhuo(orId,index){
				uni.showModal({
					title:'提示',
					content:'确定已经收货吗？',
					success:(res)=> {
						if(res.confirm){
							this.$http.get('/ppOrder/updatePPOrderStatus',{
								orId:orId,
							}).then(res => {
								if(res.data.code==200){
									this.$u.toast("收货成功")
									uni.$emit('checkPinpaiUserInfo');
									uni.$emit('getPinpaiOrderByGroup');
									if(this.current==0){//全部
										this.tabs[this.current][index].orStatus = 3;
										this.tabs[4].push(this.tabs[this.current][index])
										for (let i in this.tabs[3]) {
											if(this.tabs[3][i].orId == orId){
												this.tabs[3].splice(i,1)
												break
											}
										}
										if(this.tabs[this.current][index].orPeisongtype==0){
											for (let i in this.tabs[5]) {
												if(this.tabs[5][i].orId == orId){
													this.tabs[5].splice(i,1)
													break
												}
											}
										}
									}else if(this.current==3){//待收货
										for (let i in this.tabs[0]) {
											if(this.tabs[0][i].orId == orId){
												this.tabs[0][i].orStatus = 3;
												this.tabs[4].push(this.tabs[0][i])
												break
											}
										}
										this.tabs[3].splice(index,1)
									}else{//自提
										for (let i in this.tabs[0]) {
											if(this.tabs[0][i].orId == orId){
												this.tabs[0][i].orStatus = 3;
												this.tabs[4].push(this.tabs[0][i])
												break
											}
										}
										this.tabs[5].splice(index,1)
									}
								}else{
									this.$u.toast(res.data.msg)
								}
							})
						}else if(res.cancel){
							
						}
					}
				})
			},
			//查看物流
			WuLiu(orId){
				// console.log("查看订单物流信息"+orId)
				this.$http.get('/ppOrder/getWuliu',{
					orid:orId
				}).then(res => {
					if(res.data.code==200){
						let src = 'https://m.kuaidi100.com/app/query/?coname=xielian&nu='+res.data.data.id+"&com="+res.data.data.pinyin+"&callbackurl=";
						uni.navigateTo({
							url:'../../pages/quanfan/MyWebview/MyWebview?url='+encodeURIComponent(src)
						})
					}else{
						this.$u.toast("此订单有误!请联系客服人员")
					}
				})
			},
			//未发货退款
			tuikuan(orId,phone,gid,odId){
				console.log("点击申请退款了")
				uni.navigateTo({
					url:'../refund/tuikuanShenQing?orId='+orId+'&tel='+phone+'&odId='+odId+'&gid='+gid
				})
			},
			//去支付
			goPay(unionid,money,yunfei,gimages){
				// let allMoney = money + yunfei;
				uni.navigateTo({
					url:'submitOrder?orid='+unionid+'&gimages='+gimages+'&id=3'
				})
			},
			//取消自提订单
			quxiaoOrder(orId,index){
				uni.showModal({
					title:'提示',
					content:'确定取消订单吗？',
					success:(res)=> {
						if(res.confirm){
							this.$http.get('/ppRefund/zitiQuxiaoOrder',{
								orId:orId,
							}).then(res => {
								if(res.data.code==200){
									this.$u.toast("取消订单成功")
									uni.$emit('checkPinpaiUserInfo');
									uni.$emit('getPinpaiOrderByGroup');
									if(this.current==0){//全部
										this.tabs[this.current][index].orStatus = 7;
										for (let i in this.tabs[5]) {
											if(this.tabs[5][i].orId == orId){
												this.tabs[5].splice(i,1)
												break
											}
										}
									}else{//自提
										this.tabs[5].splice(index,1)
										for (let i in this.tabs[0]) {
											if(this.tabs[0][i].orId == orId){
												this.tabs[0][i].orStatus = 7;
												break
											}
										}
									}
								}else{
									this.$u.toast(res.data.msg)
								}
							})
						}else if(res.cancel){
							
						}
					}
				})
			},
			//删除订单
			deleteOrder(orId,index){
				uni.showModal({
					title:'提示',
					content:'确定删除该订单？',
					success:(res)=> {
						if(res.confirm){
							this.$http.get('/ppOrder/deletePPOrderxcx',{
								orId:orId,
								userid:uni.getStorageSync('usersId')
							}).then(res => {
								this.$u.toast("删除成功")
								uni.$emit('checkPinpaiUserInfo');
								uni.$emit('getPinpaiOrderByGroup');
								this.tabs[this.current].splice(index,1)
								if(this.current==0){
									for (let i in this.tabs[1]) {
										if(this.tabs[1][i].orId == orId){
											this.tabs[1].splice(i,1)
											break
										}
									}
								}else{
									for (let i in this.tabs[0]) {
										if(this.tabs[0][i].orId == orId){
											this.tabs[0].splice(i,1)
											break
										}
									}
								}
							})
						}else if(res.cancel){
							
						}
					}
				})
			},
			swichImage(images){
				if(images.length<1){
					return '../../static/center/tuijian.png'
				}else{
					return this.host + images
				}
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.page >= 3) return ;
					this.status = 'loading';
					this.page = ++ this.page;
					setTimeout(() => {
						if(this.page >= 3) this.status = 'nomore';
						else this.status = 'loading';
					}, 2000)
			},
			// 跳转到订单详情
			goOrderDetail(orId,unionid,orStatus,orPeisongtype,orTime,code,zitiId,adId){
				console.log("点击跳转订单详情页面")
				console.log(orId,unionid)
				uni.navigateTo({
					url:'orderDetail?orId='+orId+'&unionid='+unionid+"&orStatus="+orStatus+"&orPeisongtype="+orPeisongtype+"&orTime="+orTime+"&code="+code+'&zitiId='+zitiId+'&adId='+adId
				})
			},
			// 自提订单自提
			ziti(code){
				console.log("跳转自提二维码界面")
				uni.navigateTo({
					url:'zitiQrcode?code='+code
				})
			},
			// 加载订单数据
			getOrders(x,c){		// x表示订单状态，c表示tabs下标
				this.$http.get('/ppOrder/userSelectOrderxcx', {
					userid:uni.getStorageSync("usersId"),
					orStatus:x==4?2:x,
					peisongtype:x==4?'ziti':(x==1?'fahuo':(x==2?'fahuo':''))
				}).then(res => {
					if(res.data.olist==null || res.data.olist=="" || res.data.olist==undefined){
						return;
					}
					for(let i=0;i<res.data.olist.length;i++){
						let obj = { };
						obj['guiges'] = res.data.olist[i].guiges;			// 商品规格
						obj['orTime'] = res.data.olist[i].orTime;			// 下单时间
						obj['orId'] = res.data.olist[i].orId;				// 订单编号
						obj['orStatus'] = res.data.olist[i].orStatus;		// 订单状态
						obj['odId'] = res.data.olist[i].odId;				// 订单详情编号
						obj['orTotalnum'] = res.data.olist[i].orTotalnum;	// 订单商品数量
						obj['orPrice'] = res.data.olist[i].orPrice;			// 订单总价格
						obj['orYunfei'] = res.data.olist[i].orYunfei;		// 订单运费
						obj['orOrdernumber'] = res.data.olist[i].orOrdernumber;// 订单号
						obj['unionid'] = res.data.olist[i].orOrdernumber;	// 联合订单号
						obj['orPeisongtype'] = res.data.olist[i].orPeisongtype; // 订单配送类型
						this.tabs[c].push(res.data.olist[i]);
					}
				})
			},
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style scoped>
	.showDiv{
		display: block;
	}
	.noShowDiv{
		display: none;
	}
#demo1,#demo2,#demo3{
	/* height: 200rpx; */
}
#demo2{
}
#demo3{
}
.order-box{
	background-color: white;
	margin-bottom: 10rpx;
	padding: 20rpx 0rpx;
}
.order-box .ordertime{
	color: #FF7900;
	text-align: right;
	margin-bottom: 20rpx;
	font-size: 24rpx;
	padding-right: 20rpx;
}
.order-box .goods-info{
	display: flex;
	padding: 10rpx 20rpx 10rpx 17rpx;
	margin-top: 6rpx;
	background-color: #F6f6f6;
	height: 160rpx;
	align-items: flex-start;
	color: #111111;
}
.order-box .goods-info>view{
	flex: 1;
}
.order-box .goods-info>view:nth-child(2){
	flex: 4;
}
.order-box .goods-img{
	width: 16%;
	height: 60px;
}
.qian::before{
	content: '￥';
}
.order-box .summary-box{
	margin-top: 20rpx;
	text-align: right;
	padding-right:20rpx;
	margin-bottom: 20rpx;
	font-size: 24rpx;
}
.order-box .status-box{
	display: flex;
	justify-content: flex-end;
	padding-right:20rpx;
	font-size: 24rpx;
}
.goods-name>view{
	display: flex;
	justify-content: space-between;
	padding-left: 10rpx;
}
.status-btn2{
	padding: 10rpx 20rpx;
	margin-right: 20rpx;
	color: #000000;
	border-radius: 40rpx;
	border: 2rpx solid #000000;
}
.status-btn1{
	padding: 10rpx 20rpx;
	margin-right: 20rpx;
	background-color: white;
	color: red;
	border-radius: 40rpx;
	border: 2rpx solid red;
}
.status-btn{
	padding: 10rpx 20rpx;
	background-color: white;
	color: #FF7900;
	border-radius: 40rpx;
	border: 2rpx solid #FF7900;
}
.jianjie{
	padding-top: 30rpx;
	width: 87%;
	overflow: hidden; //超出部分隐藏
	-webkit-line-clamp: 2; //只显示两行
	text-overflow: ellipsis; //超出部分显示省略号
	display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
	-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 纵向
}
</style>
